<template>

	<div class="innerpage">
		<Header active="2"></Header>
		<div class="page_banner" :style="'background-image:url(' + cateInfo.image + ')'">
			<div class="page-inner">
				<h1 class="f60 font-b">{{cateInfo.name}}</h1>
			</div>
		</div>
		<Tabs :tabsList="navList" />
		<div class="page-inner page-padding">
			<div class="RiskMatrix">
				<div class="tit f36 font-m">香港仿制药毒性风险评估
				</div>
				<div class="box">
					<div class="bt f24 font-m">步驟1：搜索和選擇相關產品</div>
					<div class="form">
						<div class="lines flex">
							<div class="line">
								<div class="lt f16">關鍵字</div>
								<div class="lin">
									<el-input clearable v-model="parms.keyword"
										placeholder="產品名稱/持證商/成分" />
								</div>
							</div>
							<div class="line">
								<div class="lt f16">持證商</div>
								<div class="lin">
									<el-select clearable v-model="parms.mid" placeholder="">
										<el-option v-for="i in manufactures" :key="i.id" :label="i.company_name"
											:value="i.id" />
									</el-select>
								</div>
							</div>
							<div class="line">
								<div class="lt f16">给药途径</div>
								<div class="lin">
									<el-select clearable v-model="parms.administration_route" placeholder="">
										<el-option v-for="i in administration_route" :key="i" :label="i" :value="i" />
									</el-select>
								</div>
							</div>
							<div class="line">
								<div class="lt f16">劑型</div>
								<div class="lin">
									<el-select clearable v-model="parms.dosage" placeholder="">
										<el-option v-for="i in dosageforms" :key="i" :label="i" :value="i" />
									</el-select>
								</div>
							</div>
							<div class="line">
								<div class="lt f16">長期治療</div>
								<div class="lin">
									<el-select clearable v-model="parms.long_term_treatment" placeholder="">
										<el-option v-for="i in otherOptions" :key="i.title" :label="i.title"
											:value="i.value" />
									</el-select>
								</div>
							</div>
							<div class="line">
								<div class="lt f16">法律分類</div>
								<div class="lin">
									<el-select clearable v-model="parms.legal_classification" placeholder="">
										<el-option v-for="i in legal_classifications" :key="i" :label="i" :value="i" />
									</el-select>
								</div>
							</div>
							<div class="line">
								<div class="lt f16">銷售要求</div>
								<div class="lin">
									<el-select clearable v-model="parms.sale_requirement" placeholder="">
										<el-option v-for="i in sale_requirements" :key="i" :label="i" :value="i" />
									</el-select>
								</div>
							</div>
							<div class="line">
								<div class="lt f16">使用專用設施</div>
								<div class="lin">
									<el-select clearable v-model="parms.use_dedicated_facility" placeholder="">
										<el-option v-for="i in otherOptions" :key="i.title" :label="i.title"
											:value="i.value" />
									</el-select>
								</div>
							</div>
						</div>
						<div class="btns flex">
							<div class="btn on flex" @click="search"><i
									class="iconfont icon-sousuo"></i><span>搜索</span></div>
							<div class="btn gray flex" @click="clear"><i
									class="iconfont icon-clear"></i><span>清除</span></div>
						</div>
						<div class="line full">
							<div class="lt f16"><span class="num">{{ products.length }}</span> 个产品被找到,请选择一个</div>
							<div class="lin">
								<el-select @change="setSelectedProduct" v-model="selectedProductId" placeholder="">
									<el-option v-for="i in products" :key="i.hkid" :label="i.product_name"
										:value="i.hkid" />
								</el-select>
							</div>
						</div>
					</div>
				</div>
				<div class="box">
					<div class="bt f24 font-m">步驟2：从已选定的产品中选择毒性最强的成分</div>
					<div class="selectDetail">
						<div class="t f20 font-m">所選產品的詳細資訊</div>
						<div class="items flex">
							<div class="i flex">
								<div class="il font-m">註冊號:</div>
								<div class="ir">{{ selectedProduct.reg_no }}</div>
							</div>
							<div class="i flex">
								<div class="il font-m">最大每日剂量:</div>
								<div class="ir">{{ selectedProduct.max_daily_dose }}</div>
							</div>
							<div class="i flex">
								<div class="il font-m">产品名:</div>
								<div class="ir">{{ selectedProduct.product_name }}</div>
							</div>
							<div class="i flex">
								<div class="il font-m">長期治療:</div>
								<div class="ir">{{ selectedProduct.long_term_treatment }}</div>
							</div>
							<div class="i flex">
								<div class="il font-m">持證商:</div>
								<div class="ir">{{ selectedProduct.company_name }}</div>
							</div>
							<div class="i flex">
								<div class="il font-m">法律分類:</div>
								<div class="ir">{{ selectedProduct.legal_classification }}</div>
							</div>
							<div class="i flex">
								<div class="il font-m">给药途径:</div>
								<div class="ir">{{ selectedProduct.administration_route }}</div>
							</div>
							<div class="i flex">
								<div class="il font-m">銷售要求:</div>
								<div class="ir">{{ selectedProduct.sale_requirement }}</div>
							</div>
							<div class="i flex">
								<div class="il font-m">劑型:</div>
								<div class="ir">{{ selectedProduct.dosage_form }}</div>
							</div>
							<div class="i flex">
								<div class="il font-m">使用專用設施:</div>
								<div class="ir">{{ selectedProduct.use_dedicated_facility }}</div>
							</div>
						</div>
					</div>
					<div class="pt">对于步骤2，请选择该产品中毒性最强的成分</div>
					<div class="radios">
						<el-radio-group v-model="most_toxic_ingredient" @change="getHistory">
							<template v-for="i in selectedProduct.ingredientsAttr">
								<el-radio :value="i">{{ i }}</el-radio>
							</template>
						</el-radio-group>
					</div>
				</div>
				<div class="box" :class="most_toxic_ingredient?'':'disabled'">
					<div class="bt f24 font-m">步驟3：根据毒理学风险对选定成分进行分类评估
					</div>
					<div class="selectedIngredient f20 font-m" v-if="most_toxic_ingredient">
						<div class="i">{{ most_toxic_ingredient }}</div>
					</div>
					<div class="multChecks radios">
						<div class="i" v-for="(i,index) in info.parametersOps">
							<div class="it f16"><span class="font-m">Param {{ index+1 }}:
								</span><span>{{ i.title }}</span></div>
							<el-radio-group v-model="parameters[i.key]">
								<template v-for="j in i.options">
									<el-radio :value="j.value">{{ j.label }}</el-radio>
								</template>
							</el-radio-group>
						</div>
					</div>
					<div class="btns flex f20">
						<div class="btn on" @click="Calculate">計算</div>
					</div>
					<div class="result f16">
						<div class="li"><span class="font-m">分數: </span> <span class="blue">{{ result.Score }}</span>
						</div>
						<div class="li"><span class="font-m">類別:</span> <span
								class="red">{{ result.Category }}</span></div>
						<div class="li"><span class="font-m">筆記:</span> <span>{{ result.note }}</span></div>
					</div>
					<div class="btns flex f20">
						<div class="btn on" @click="Save">保存</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>
<script>
	import {
		getCloumnList,
		save_riskmatrix_data,
		product_filters,
		manufacturerList,
		riskmatrix_search_product,
		getCategoryList,
		get_riskmatrix_data
	} from '@/api/sections'
	import {
		ElMessageBox
	} from 'element-plus'
	export default {
		async setup() {
			const info = {
				banner: '/uploadfiles/toolsban.jpg',
				parametersOps: [{
						title: "Potency of API (per unit dose)",
						key: 'potency',
						options: [{
								label: "NMT 1 mg",
								value: "A"
							},
							{
								label: "1 mg - 100 mg",
								value: "B"
							},
							{
								label: ">100 mg",
								value: "C"
							}
						]
					},
					{
						title: "Genotoxicity/Mutagenic (per person per day)",
						key: 'genotoxicity',
						options: [{
							label: "NMT 1.5 - 10 μg",
							value: "A"
						}, {
							label: "NLT 10 - 100 μg",
							value: "B"
						}, {
							label: "NLT 100 μg",
							value: "C"
						}]
					},
					{
						title: "Reproductive Development (dose per day)",
						key: 'reproductiveDevelopment',
						options: [{
							label: "NMT 10 mg",
							value: "A"
						}, {
							label: "NLT 10 - 250 mg",
							value: "B"
						}, {
							label: "NLT 250 mg",
							value: "C"
						}]
					},
					{
						title: "Highly Sensitising Active",
						key: 'sensitisingActive',
						options: [{
							label: "Beta lactam or allergen",
							value: "A"
						}, {
							label: "Some levels of sensitising",
							value: "B"
						}, {
							label: "Not sensitising",
							value: "C"
						}]
					},
					{
						title: "Cumulative Exposure",
						key: 'cumulativeExposure',
						options: [{
							label: "Extended - lifetime therapy",
							value: "A"
						}, {
							label: "Repeated prescription",
							value: "B"
						}, {
							label: "Single prescription or no prescription",
							value: "C"
						}]
					},
					{
						title: "Route of Administration",
						key: 'route',
						options: [{
							label: "Injectable",
							value: "A"
						}, {
							label: "Ophthalmic/Inhalation/Transdermal/Mucosal",
							value: "B"
						}, {
							label: "Oral / Topical",
							value: "C"
						}]
					},
					{
						title: "Daily Dose",
						key: 'dailyDose',
						options: [{
							label: "Greater than 3 doses per day",
							value: "A"
						}, {
							label: "2 - 3 doses per day",
							value: "B"
						}, {
							label: "One or fewer doses per day",
							value: "C"
						}]
					},
					{
						title: "Unknown Data on Toxicity",
						key: 'unknownData',
						options: [{
							label: "No data available",
							value: "A"
						}, {
							label: "Established data and side effects",
							value: "B"
						}, {
							label: "Extensive data known GRAS",
							value: "C"
						}]
					},
					{
						title: "Medical Oversight",
						key: 'medicalOversight',
						options: [{
							label: "Clinically supervised administration",
							value: "A"
						}, {
							label: "Prescription Medicine",
							value: "B"
						}, {
							label: "Non-prescription Medicine including Pharmacy only and OTC Medicine",
							value: "C"
						}]
					}
				]
			};
			return {
				info
			}
		},
		data() {
			return {
				products: [],
				navList: [],
				selectedProductId: '',
				selectedProduct: {},
				most_toxic_ingredient: '',
				parms: {},
				cateInfo: {},
				administration_route: [],
				manufactures: [],
				dosageforms: [],
				sale_requirements: [],
				parameters: {},
				otherOptions: [{
					title: 'All',
					value: ''
				}, {
					title: 'Yes',
					value: 1
				}, {
					title: 'No',
					value: 0
				}, ],
				legal_classifications: [],
				result: {
					Score: "",
					Category: "",
					note: ""
				}
			}
		},
		methods: {
			search() {
				this.selectedProductId=''
				riskmatrix_search_product(this.parms).then((res) => {
					this.products = res.data
				})

			},
			getHistory() {
				console.log(1231313)
				this.parameters={};
				this.result= {
					Score: "",
					Category: "",
					note: ""
				}
				let keyWord=`${this.selectedProduct.tid}_${this.selectedProduct.hkid}_${this.most_toxic_ingredient}`
				let post = {

					keyWord: keyWord,
				}
				if (localStorage.getItem("userinfo")) {
					post.token = JSON.parse(localStorage.getItem("userinfo")).token
				}
				get_riskmatrix_data(post).then((res) => {
					
					this.parameters=res.data
				})
			},

			setSelectedProduct(e) {
				const that = this;
				
				that.parameters={};
				that.selectedProduct={}
				that.selectedProduct.ingredientsAttr=[]
				let arr = that.products.filter(i => {
					return i.hkid == e
				});
				that.selectedProduct = arr[0];
				that.selectedProduct.ingredientsAttr = JSON.parse(that.selectedProduct.ingredients)
			},
			clear() {
				const that = this;
				Object.keys(that.parms).forEach(k => {
					that.parms[k] = ''
				});
				that.products = [];
				that.selectedProductId = '';
				that.selectedProduct = {};
				that.most_toxic_ingredient = '';
				that.parameters = {};
				that.result = {};
			},
			Calculate() {
				const that = this;
				let len = 0;
				Object.keys(that.parameters).forEach(k => {
					len++
				});
				if (len < 9) {
					ElMessageBox.alert(
						'應確定所有九個參數', {
							title: 'Warm',
							type: 'warning'
						}
					);
					return;
				};
				let score = 0
				let Category = 'A'
				Object.keys(that.parameters).some(item => {
					if (that.parameters[item] == 'A') {
						score += 30
					}
					if (that.parameters[item] == 'B') {
						score += 20
					}
					if (that.parameters[item] == 'C') {
						score += 10
					}
				})
				console.log(that.parameters)
				if (score > 150) {
					Category = 'A'
				} else if (score <= 100) {
					Category = 'C'
				} else {
					Category = 'B'
				}
				let res = {
					Score: score,
					Category: Category + " (PDE評估是強制性的)",
					note: "C: <=100; B: >100 & <=150; A: >150; minSore=80, maxScore=240"
				};
				that.result = res;

			},
			Save() {
				let keyWord=`${this.selectedProduct.tid}_${this.selectedProduct.hkid}_${this.most_toxic_ingredient}`
				let post = {
					...this.parameters,
					keyWord:keyWord,
				}
				
				let postData={
					'data': post,
				}
				if (localStorage.getItem("userinfo")) {
					postData.token = JSON.parse(localStorage.getItem("userinfo")).token
				}
				save_riskmatrix_data(postData).then((res) => {
					console.log(res, 1111)
				})
			}
		},
		mounted: function() {
			var that = this;



			getCloumnList({
				'id': 1421
			}).then((res) => {
				console.log(res, 1111)
				that.navList = res.data

			})

			getCategoryList({
				'cid': 1421
			}).then((res) => {
				this.cateInfo = res.data
			})
			manufacturerList({
				page:1,pagesize:999
			}).then((res) => {
				this.manufactures = res.data.data
			})
			product_filters({
				'column': 'administration_route'
			}).then((res) => {
				that.administration_route = res.data

			})
			product_filters({
				'column': 'dosage_form'
			}).then((res) => {
				that.dosageforms = res.data

			})
			product_filters({
				'column': 'sale_requirement'
			}).then((res) => {
				that.sale_requirements = res.data

			})
			product_filters({
				'column': 'legal_classification'
			}).then((res) => {
				that.legal_classifications = res.data

			})


		}
	}
</script>